<script setup>
import CardComponent from "@/components/CardComponent.vue";
import dialogShow from "@/components/dialogShow.vue";
import { Plus } from '@element-plus/icons-vue'
import { userGetAllUsers, userQueryUserLikeByName, userUpdateUserById, userUpdateStatusById, userAddUser } from '@/api/user'
import { ref } from "vue";
import { formatOperateTime } from "@/utils/format";
import { Search, Edit } from '@element-plus/icons-vue'
const userList = ref(null)
const GetUserList = async () => {
  const res = await userGetAllUsers()
  // console.log(res.result);
  userList.value = res.result

}
GetUserList()
const queryStaffParam = ref({
  name: ''
})

// 查询事件
const onQueryStaff = async () => {
  const { result } = await userQueryUserLikeByName(queryStaffParam.value.name)
  // console.log(result);
  userList.value = result
}

// 修改用户
const thisUser = ref(null)
const onUpdateUser = (id) => {
  isShow.value = true
  thisUser.value = JSON.parse(JSON.stringify(userList.value.find(item => item.id === id)))
}
// 弹窗展示
const isShow = ref('false')

const onSubmitChange = async () => {
  await userUpdateUserById(thisUser.value)
  isShow.value = false
  GetUserList()
}
// 改变管理员状态
const changeStatus = async (val, id) => {
  if (val === 1) {
    await userUpdateStatusById({ id: id, status: 2 })
  } else {
    await userUpdateStatusById({ id: id, status: 1 })
  }
  GetUserList()
}

// 添加管理员弹窗
const isAddShow = ref('false')
const addUserValues = ref({
  username: '',
  name: '',
  password: '',
  phone: '',
  sex: '1'
})
const onAddUser = async () => {
  await userAddUser(addUserValues.value)
  isAddShow.value = false
  GetUserList()
  addUserValues.value = {
    username: '',
    name: '',
    password: '',
    phone: '',
    sex: '1'
  }
}
</script>

<template>
  <div>
    <CardComponent :is-need-head=false card-height="100px" card-width="100%">
      <div class="item-header">
        <div>
          <el-form :inline="true" :model="queryStaffParam">
            <el-form-item label="员工姓名:">
              <el-input placeholder="请输入员工姓名" v-model="queryStaffParam.name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onQueryStaff">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div><el-button size="large" :icon="Plus" @click="isAddShow = true">添加员工</el-button></div>
      </div>
      <div>
        <el-table style="width: 100%;" :data="userList">
          <el-table-column label="员工姓名" width="200" prop="name"></el-table-column>
          <el-table-column label="账号" width="200" prop="username"></el-table-column>
          <el-table-column label='手机号' width="200" prop="phone"></el-table-column>
          <el-table-column label="账号状态" width="200">
            <template #default="{ row }">
              {{ row.status === 1 ? "启用" : "禁用" }}
            </template>
          </el-table-column>
          <el-table-column label="最后操作时间" width="200">
            <template #default="{ row }">
              {{ formatOperateTime(row.updateTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <el-button type="primary" :icon="Search" @click="onUpdateUser(row.id)">修改</el-button>
              <el-button type="danger" :icon="Edit" v-if="row.status === 1"
                @click="changeStatus(1, row.id)">禁用</el-button>
              <el-button type="success" :icon="Edit" v-else @click="changeStatus(2, row.id)">启用</el-button>
            </template>

          </el-table-column>
        </el-table>
      </div>
    </CardComponent>
    <!-- 修改管理员弹窗 -->
    <dialogShow title="修改管理员" v-model="isShow" :need-footer="false">
      <el-form :model="thisUser">
        <el-form-item label="管理员编号:">
          <el-input v-model="thisUser.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="管理员名:">
          <el-input v-model="thisUser.name"></el-input>
        </el-form-item>
        <el-form-item label="账号名:">
          <el-input v-model="thisUser.username"></el-input>
        </el-form-item>
        <el-form-item label="管理员密码:">
          <el-input v-model="thisUser.password"></el-input>
        </el-form-item>
        <el-form-item label="管理员手机号:">
          <el-input v-model="thisUser.phone"></el-input>
        </el-form-item>
        <el-form-item label="管理员性别:">
          <el-radio-group v-model="thisUser.sex">
            <el-radio value="1">男</el-radio>
            <el-radio value="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="isShow = false">取消</el-button>
          <el-button type="primary" @click="onSubmitChange">
            确定
          </el-button>
        </el-form-item>
      </el-form>
    </dialogShow>
    <!-- 添加管理员弹窗 -->
    <dialogShow title="添加管理员" v-model="isAddShow" :need-footer="false">
      <el-form :model="addUserValues">
        <el-form-item label="管理员名:">
          <el-input v-model="addUserValues.name"></el-input>
        </el-form-item>
        <el-form-item label="账号名:">
          <el-input v-model="addUserValues.username"></el-input>
        </el-form-item>
        <el-form-item label="管理员密码:">
          <el-input v-model="addUserValues.password"></el-input>
        </el-form-item>
        <el-form-item label="管理员手机号:">
          <el-input v-model="addUserValues.phone"></el-input>
        </el-form-item>
        <el-form-item label="管理员性别:">
          <el-radio-group v-model="addUserValues.sex">
            <el-radio value="1">男</el-radio>
            <el-radio value="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="isAddShow = false">取消</el-button>
          <el-button type="primary" @click="onAddUser">
            确定
          </el-button>
        </el-form-item>
      </el-form>
    </dialogShow>


  </div>
</template>

<style scoped>
.item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:deep(.item-header .el-form-item) {
  margin: 0px 5px;
}

.el-table__row .el-button {
  width: 60px;
}

:deep(.el-dialog .el-form-item) {
  margin-bottom: 18px
}
</style>
